<ion-header>
  <ion-navbar>
    <ion-title>{{chatUserName}}</ion-title>
  </ion-navbar> 
</ion-header>
<ion-content>
  <div class="message-wrap">
        <div class="message right" *ngFor="let m of messageList" 
        [class.left]="m.userId===chatUserId" 
        [class.right]="m.userId===userId"
        >
          <img [src]="m.userImgUrl" class="user-img">
          <!-- 发送消息时，头像下方有加载动画 -->
          
          <ion-spinner name="dots" *ngIf="m.status === 'pending'" ></ion-spinner>
              <div class="msg-detail">
                    <div class="msg-info">
                      <p>{{m.username}} &nbsp; {{m.time | relativetime}}</p>
                    </div>

                    <div class="msg-content">
                      <p class="line-breaker">{{m.message}}</p>
                    </div>
              </div>
        </div>
  </div>
</ion-content>

<ion-footer no-border [style.height]="isOpenEmojiPicker? '255px': '55px'">
    <ion-grid class="input-wrap">
        <ion-row>
            <ion-col col-2>
                <button ion-button clear ion-only item-right (click)="switchEmojiPicker()" >
                  <ion-icon name="md-happy"></ion-icon>
                </button>
            </ion-col>
            <ion-col col-8>
                <ion-textarea 
                #chatInput
                [(ngModel)]="editorMessage"
                (keyup.enter)="sendMessage()" 
                (focus)="focus()"
                placeholder="输入内容"></ion-textarea>
            </ion-col>
            <ion-col col-2>
                <button ion-button clear ion-only item-right (click)="sendMessage()" >
                    <ion-icon name="send"></ion-icon>
                  </button>
            </ion-col>
          </ion-row>
    </ion-grid>
    <emojipicker *ngIf="isOpenEmojiPicker"  [(ngModel)]="editorMessage"></emojipicker>
</ion-footer>